<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.ort">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
		<style>
			.layui-elem-quote{
				border-left: 5px solid #1e9fff;
			}
			.layui-form-select dl dd.layui-this {
				background-color: #1e9fff;
				color: #fff;
			}.input-group {
				 position: relative;
				 display: table;
				 border-collapse: separate;
				 width: 100%;
			 }
			.input-group .form-control, .input-group-addon {
				display: table-cell;
			}
			.input-group-addon {
				color: #fff;
				padding: 5px;
				text-align: center;
				background-color: #1e9fff;
				border-radius: 2px;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
			.input-group .form-control:first-child{
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}

		</style>
	</head>
	<body>
		<div class="layui-panel" style="padding: 8px;">
			<blockquote class="layui-elem-quote layui-border-blue">商城基本配置</blockquote>
			<div>
				<form class="layui-form layui-form-pane">
					<div class="layui-form-item">
						<label class="layui-form-label">商城名称</label>
						<div class="layui-input-block">
							<input class="layui-input" lay-verify="required" name="name" autocomplete="off" placeholder="" />
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">商城地址</label>
							<div class="layui-input-inline" style="min-width:150px;">
								<select  id="province" name="province" lay-filter="province"  lay-verify="required">

								</select>
							</div>
							<div class="layui-form-mid">-</div>
							<div class="layui-input-inline" style="min-width:120px;">
								<select class="layui-select" name="city" id="city" lay-filter="city" lay-verify="required">

								</select>
							</div>
							<div class="layui-form-mid">-</div>
							<div class="layui-input-inline" style="min-width:120px;">
								<select class="layui-select" name="area" id="area" lay-filter="area" lay-verify="required">

								</select>

							</div>
							<div class="layui-form-mid">-</div>
							<div class="layui-input-inline" style="min-width:250px;">
								<input class="layui-input" name="address" lay-verify="required" autocomplete="off" placeholder="具体地址" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">联系电话</label>
							<div class="layui-input-inline">
								<input class="layui-input" name="mobile"  lay-verify="required" autocomplete="off" placeholder="11位电话号码" />
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">联系QQ</label>
							<div class="layui-input-inline">
								<input class="layui-input" name="QQ" autocomplete="off" placeholder="QQ号码" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">地理坐标</label>
							<div class="layui-input-inline">
								<input class="layui-input" name="lng" autocomplete="off" placeholder="经度" />
							</div>
							<div class="layui-form-mid">-</div>
							<div class="layui-input-inline">
								<input class="layui-input" name="lat" autocomplete="off" placeholder="纬度" />
							</div>
							<div class="layui-input-inline">
								<a class="layui-btn layui-btn-normal" id="openMap">
									<i class="layui-icon layui-icon-about"></i>
									打开地图
								</a>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 150px;">短信有效时间</label>
							<div class="layui-input-inline" style="width: 300px;">
								<div class="input-group">
									<input type="number" class="layui-input" name="smsTime" autocomplete="off" placeholder="短信有效时间(秒)" />
									<span class="input-group-addon">秒</span>
								</div>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label" style="width: 150px;">邮件有效时间</label>
							<div class="layui-input-inline" style="width: 300px;">
								<div class="input-group">
									<input type="number" class="layui-input" name="emailTime" autocomplete="off" placeholder="忘记密码邮件有效时间(天)" />
									<span class="input-group-addon">天</span>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div style="text-align: center;">
							<a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submitBtn">
								<i class="layui-icon layui-icon-ok"></i>
								确定保存
							</a>
							<a class="layui-btn layui-btn-primary" id="cleanBtn">
								<i class="layui-icon layui-icon-fonts-clear"></i>
								清空重置
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script>
			var $,form;
			layui.use(['jquery','form','layer'],function(){
				form = layui.form,$ = layui.jquery;
				var layer = layui.layer;

				findRegion(1,'province','省份',0);

				$('#cleanBtn').on('click',function(){
					$('.layui-form input').val("");
				})

				$('#openMap').on('click',function () {
					var lng = $('input[name="lng"]').val(),
					    lat = $('input[name="lat"]').val();
					lng = lng==''?0.0:lng,lat = lat==''?0.0:lat;

					var address = $("#province option:selected").text()+
							$("#city option:selected").text()+
							$("#area option:selected").text();

					top.layer.open({
						title:'经纬度选择',
						type:2,
						content:'/page/system/map/'+lng+'/'+lat+"?address="+address,
						area:['800px','700px'],
						maxmin:true,
						btn:['确定选择','取消关闭'],
						btn1:function (i,o){
							var point = o.find('iframe')[0].contentWindow.submitBtn();
							$('input[name="lng"]').val(point.lng);
							$('input[name="lat"]').val(point.lat);
						},
						full:function (o,i) {
							o.find('iframe')[0].contentWindow.setHeight();
						},
						min:function (o,i) {
							o.find('iframe')[0].contentWindow.setHeight();
						}
					})
				})

				form.on('submit(submitBtn)',function(data){
					var formData = data.field;
				})
				//下拉框监听
				form.on('select(province)',function (data){
					if(data.value==''){
						$('#city').empty();
						$('#area').empty();
					}else{
						findRegion(2,'city','市',data.value);
					}
				})
				form.on('select(city)',function (data){
					if(data.value==''){
						$('#area').empty();
					}else{
						findRegion(3,'area','区/县',data.value);
					}
				})


			})

			function findRegion(type,name,tip,pid){
				$.ajax({
					type:'post',
					url:'/system/rc/find',
					data:{
						pid:pid,
						type:type,
						limit:100
					},
					dataType:'json',
					success:function (res) {
						var obj = $('#'+name);
						//清除里面内容
						$(obj).empty().append('<option value="">请选择'+tip+'</option>');
						$.each(res.data,function(i,data){
							var option = '<option value="'+data.id+'">'+data.name+'</option>';
							$(obj).append(option);
						})
						form.render('select');//指定表单刷新
					}
				})
			}

		</script>
	</body>
</html>
